<template>
    <div class="blog-list-container">
      <div class="search-filter">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索文章标题、内容或标签..."
        />
        <select v-model="sortOption">
          <option value="latest">按时间排序</option>
          <option value="likes">按点赞数排序</option>
        </select>
      </div>
      <div v-for="blog in blogs" :key="blog.id" class="blog-item">
        <!-- <h3>{{ blog.title }}</h3> -->
        <img :src="blog.image" alt="Blog Image" v-if="blog.image" style="width: 100px; margin: 30px 20px;"/>
        <p>{{ blog.content }}</p>
        <p>{{ blog.pic }}</p>
        <router-link :to="`/blog/${blog.id}`">查看详情</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
import { ref, computed } from 'vue';



import Star1 from "../images/star-1.png"
import Star2 from "../images/star-3.png"
import Star3 from "../images/star-2.png"
  
  const blogs = ref([
    { id: 1,  content: '#电影小小的我定档#打起鼓来敲起锣，新年来临之际，一切都有可能发生。12月31日和#电影小小的我#一起向前看。 ​',image:Star1 },
    { id: 2, content: '#猎罪图鉴2今日开播# 借画窥相，迷案待解！#猎罪图鉴2# 以墨为线，绘形猎罪。拨开谜团，画见人心。今晚与沈翊不见不散。爱奇艺预约：O网页链接腾讯视频预约：O猎罪图鉴2 ​',image:Star2 },
    { id: 3, content: '演唱会结束回酒店路上，路过夜宵摊，唱了几个小时我还不能吃一碗肥肠粉和豆花咯？！打包，带走，开吃#张杰未LIVE巡回演唱会##张杰未LIVE开往1982巡回演唱会# ​' ,image:Star3},
    
]);

  </script>
  
  <style scoped>
  .search-filter {
    margin-bottom: 20px;
  }
  
  .search-filter input {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .search-filter select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .blog-list-container {
    padding: 20px;
  }
  
  .blog-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style> 